import React, { Component } from 'react';
import Mycalendar from 'react-calendar-zw';
import TheTime from '../comm/theTime';

class TheDate extends Component {
    state = {
        date: this.props.defaultDateTime,
        isShowDate: false,
        isShowTime: false,
    }
    inputDate = () => {
      this.setState({
        isShowDate: true,
        isShowTime: true,
      })
    }
    dateChange = (date) => {
      this.setState({
        date: date,
        isShowDate: false,
      })
      this.props.setDateTime(date);
    }
    dateClear = () => {
      this.setState({
        date: "",
        isShowDate: false,
      })
      this.props.setDateTime("");
    }
    setTime = (data) => {
        if("" === this.state.date) {
            this.props.setDateTime("");
        } else {
            this.props.setDateTime(this.state.date + " " + data);
        }
    }
    setShow = (show) => {
        this.setState({
            isShowTime: show,
        })
    }
    render() {
        return (
            <div>
              <input
                onClick={this.inputDate}
                value={this.props.defaultDateTime}
                type="text" size="12" maxLength="10" readOnly ></input>
                <Mycalendar
                    isShow={this.state.isShowDate}
                    datePickCallBack={this.dateChange}
                    clearBtnCallBack={this.dateClear}
                />
                <TheTime
                    setTime={this.setTime}
                    isShow={this.state.isShowTime}
                    setShow={this.setShow} />
            </div>
        )
    }
}

export default TheDate;
